<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            width: 300px;
            margin: 0 auto;
            font-size: 1.2rem;
            font-family: sans-serif;
        }

        p {
            line-height: 1.4;
        }

        a {
            outline: none;
            text-decoration: none;
            padding: 2px 1px 0;
        }

        a:link {
            color: #265301;
        }

        a:visited {
            color: #437A16;
        }

        a:focus {
            border-bottom: 1px solid;
            background: #BAE498;
        }

        a:hover {
            border-bottom: 1px solid;
            background: #CDFEAA;
        }

        a:active {
            background: #265301;
            color: #CDFEAA;
        }
    </style>
</head>

<body>

    <!-- 样式化链接 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_links -->
    <!-- 让我们来看一些链接 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Styling_links#%E8%AE%A9%E6%88%91%E4%BB%AC%E6%9D%A5%E7%9C%8B%E4%B8%80%E4%BA%9B%E9%93%BE%E6%8E%A5 -->

    <!-- 伪类和伪元素 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements -->

    <p>There are several browsers available, such as <a href="https://www.mozilla.org/zh-CN/firefox/">Mozilla
            Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
        <a href="https://www.microsoft.com/zh-CN/windows/microsoft-edge">Microsoft Edge</a>.
    </p>

</body>

</html>